<template>
  <div ref="pieChart2" style="width: 30rem; height: 22rem;margin: 0 auto;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { getTalentEduChart } from '@/api/company';
import * as echarts from 'echarts';
 
const pieChart2 = ref(null);

var chartsDataList = []
async function getEduChartDetail() {
  const id = '91321200MACTU4PJ4N';
  const { code, data } = await getTalentEduChart(id);
  if(code === 200) {
    data.forEach(item=>{
      chartsDataList.push({
        name: item.title,
        value: item.value
      })
    })
    console.log('chartsDataList:',chartsDataList);
  }
}

const chartPieCanvas = ()=>{
  const chartInstance = echarts.init(pieChart2.value);
  const option = {
    series: [
      {
        type: 'pie',
        color: [
          '#208AFF',
          '#63E3DF',
          // '#FFC734',
        ],
        data: chartsDataList,
        radius: ['0', '60%'],
        label: {
            show: true,
            formatter: function (arg) {
                console.log(arg)
                return arg.data.name + '\n' + arg.value + '人'
            }
        }
      }
    ]
  };
  chartInstance.setOption(option);
}
 
onMounted(() => {
  getEduChartDetail()
  setTimeout(()=>{
    chartPieCanvas()
  },1000)
});
</script>
 
<style>
/* 你的样式 */
</style>